<template>
  <div class="base-table-wrapper">
    <div class="table-header">
      <slot name='header'></slot> 
    </div>
    <el-table
        :data="tableData"
        style="width: 100%"
        :default-sort = "{prop: 'date', order: 'descending'}"
        border
        >
        <el-table-column
            v-for="column in columns"
            :key="column.key"
            :prop="column.key"
            :label="column.title"
            v-bind="column.props">
            <template v-if="column.operate" #default="scope">
              <component v-for="(op, index) in column.operate" :key="`${column.key}-${index}`" :model-value="scope.row?.[column.key]" :is="op.tag" v-bind="op.props" @change="op.change && op.change(scope.$index, scope.row)" @click="op.click && op.click(scope.$index, scope.row)">
                {{op.text}}
              </component>
            </template>
        </el-table-column>
    </el-table>
    <div class="pagination-wrapper" v-if="withPagination">
      <el-pagination
        layout="total, prev, pager, next, jumper"
        v-bind="pagination">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
    props: {
        columns: Array,
        tableData: Array,
        withPagination: Boolean,
        pagination: Object
    }
}
</script>

<style lang="scss">
.base-table-wrapper {
  .table-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .pagination-wrapper {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 16px;
  }
}
</style>